<template>
  <div style="padding-bottom: 100px;">
    <van-row v-for="item in goods" :key="item.id" class="goods_item">
      <van-col :span="3">
        <van-checkbox v-model="item.want" @change="want(item)"></van-checkbox>
      </van-col>
      <van-col :span="21" style="float: right;">
        <van-card
          :key="item.id"
          :title="item.title"
          :desc="item.desc"
          :price="item.price"
          :thumb="item.thumb">
          <div slot="footer">
            <van-row>
              <van-col>
                <van-stepper @change="count(item)" integer v-model="item.num"></van-stepper>
              </van-col>
              <van-col>
                <van-button size="mini" type="danger" @click="remove(item)">删除</van-button>
              </van-col>
            </van-row>
          </div>
        </van-card>
      </van-col>
    </van-row>
    <van-submit-bar
      style="padding-left: 10px;bottom: 50px"
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit">
      <van-checkbox @change="click" v-model="checked">全选</van-checkbox>
    </van-submit-bar>
    <FooterNav></FooterNav>
  </div>
</template>

<script>
  import {Checkbox, Card, SubmitBar, Toast, Notify} from 'vant';
  import FooterNav from "./Common/FooterNav";
  import coreFunc from "../assets/core/func"
  import appFunc from "../assets/app/func"

  export default {
    components: {
      FooterNav
    },
    data() {
      return {
        checked: false,
        totalPrice: 0.00,
        checkedGoods: [],
        goods: [],
      };
    },
    created: function () {
      appFunc.login();
      appFunc.isLogin();
      // appFunc.clearCart();
      let cart = appFunc.getCart();
      if (!cart.cartPrice)
        cart.cartPrice = 0.00;
      else
        this.totalPrice = Number(cart.cartPrice) * 100;
      cart.goodsList.forEach(cartGoods => {
        let goods = cartGoods.cartGoods;
        let want = cartGoods.want;
        let _goods = {
          id: goods.skuId,
          title: goods.goodsName,
          desc: goods.skuName,
          price: Number(goods.realPrice).toFixed(2),
          num: goods.count,
          thumb: goods.skuThumb,
          want: want,
        };
        if (want) {
          this.checkedGoods.push(goods.skuId)
        }
        this.goods.push(_goods);
      });
      this.changeChecked();
    },
    methods: {
      onSubmit: function () {
        if (appFunc.getWantCartGoodsList().length <= 0) {
          Notify("没有选中的商品");
          return false;
        }
        let cart = appFunc.getCart();
        let cartGoodsList = appFunc.getWantCartGoodsList();
        let price = cart.cartPrice;
        let count = appFunc.getWantCartGoodsCount();
        appFunc.createOrder(cartGoodsList, price, count, appFunc.getAddress());
        this.$router.push({path: "Order"})
      },
      click: function () {
        if (this.checked) {
          this.allChecked();
        } else {
          this.allNoChecked();
        }
        this.changeChecked()
      },
      want(cartGoods) {
        let index = this.goods.indexOf(cartGoods);
        appFunc.changeCartGoodsWant(index, cartGoods.want);
        this.checkedGoods = [];
        let cart = appFunc.getCart();
        cart.goodsList.forEach(cartgoods => {
          if (cartgoods.want) {
            this.checkedGoods.push(cartgoods.cartGoods.skuId)
          }
        });
        this.totalPrice = Number(cart.cartPrice) * 100;
      },
      count(cartGoods) {
        let index = this.goods.indexOf(cartGoods);
        let count = this.goods[index].num;
        appFunc.changeCartGoodsCount(index, count);
        let cart = appFunc.getCart();
        this.totalPrice = Number(cart.cartPrice) * 100;
      },
      remove(cartGoods) {
        let index = this.goods.indexOf(cartGoods);
        this.goods.splice(index, 1);
        appFunc.removeCartGoods(index);
        let cart = appFunc.getCart();
        this.totalPrice = Number(cart.cartPrice) * 100;
        Notify("删除成功！")
      },
      allChecked: function () {
        this.checkedGoods = [];
        this.goods.forEach(cartGoods => {
          let index = this.goods.indexOf(cartGoods);
          appFunc.changeCartGoodsWant(index, true);
          cartGoods.want = true;
        });
        let cart = appFunc.getCart();
        cart.goodsList.forEach(cartGoods => {
          if (cartGoods.want) {
            this.checkedGoods.push(cartGoods.cartGoods.skuId)
          }
        });
      },
      allNoChecked: function () {
        this.checkedGoods = [];
        this.goods.forEach(cartGoods => {
          let index = this.goods.indexOf(cartGoods);
          appFunc.changeCartGoodsWant(index, false);
          cartGoods.want = false;
        });
        this.changeChecked();
      },
      changeChecked() {
        if (this.goods.length === this.checkedGoods.length) {
          this.checked = true;
        }
        if (this.goods.length !== this.checkedGoods.length) {
          this.checked = false;
        }
      }
    }
  };
</script>
<style>
  .goods_item {
    height: 100px;
    position: relative;
    background-color: #fafafa;
    margin-bottom: 5px;
  }

  .goods_item .van-checkbox__label {
    width: 100%;
    padding: 0 10px 0 15px;
    box-sizing: border-box;
  }

  .goods_item .van-checkbox__icon {
    top: 50%;
    left: 10px;
    z-index: 1;
    position: absolute;
    margin-top: -10px;
  }

  .goods_item .van-card__price {
    color: #f44;
  }

  .van-stepper {
    margin-top: -2px;
  }

  .van-stepper .van-stepper__minus, .van-stepper .van-stepper__plus, .van-stepper .van-stepper__input {
    width: 30px;
    height: 25px;
    padding: 0;
    margin: 0;
  }

  .van-stepper .van-stepper__input {
    height: 23px;
  }
</style>
